import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { Drawer, Tab } from '@alifd/next';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';

import DataForm from './DataForm';

const BaseModal = ({ modal, onCancel, onSubmit, handleOnPass, ...formProps }) => {
  const { memberStore: store } = useStore();
  const [baseModal, setBaseModal] = useState(() => modal);

  useEffect(() => {
    setBaseModal(modal);
    return () => {
      store._tabStatus = '1';
    };
  }, [modal]);

  const _TAB_TYPE = [
    { name: t`成员资料`, key: '1', component: <DataForm modal={baseModal} id={baseModal.record?.id} onCancel={onCancel} onSubmit={onSubmit} onPass={handleOnPass} {...formProps} /> },
  ];

  const TITLE_TEXT = {
    add: t`添加成员`,
    view: t`查看成员`,
    edit: t`编辑成员`,
  };

  const titleComponent = () => {
    return (
      <div>{TITLE_TEXT[baseModal.show]}</div>
    );
  };

  return (
    <>
      <Drawer
        visible={baseModal.show === 'add' || baseModal.show === 'view' || baseModal.show === 'edit'}
        title={titleComponent()}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setBaseModal({ ...baseModal, toClose: `toClose$${Date.now()}` })}
        width="100%"
      >
        <Tab
          activeKey={store.tab_Status}
          onChange={(v) => { store.tab_Status = v; }}
        >
          {_TAB_TYPE.map((p) => (
            <Tab.Item title={p.name} key={p.key}>
              {p.component}
            </Tab.Item>))}
        </Tab>
      </Drawer>
    </>
  );
};

export default observer(BaseModal);
